<template>
  <div>
    <div style="display: flex; color: #666">
      <div style="width: 200px; text-align: center;  border-right: 1px solid #ddd; min-height: calc(100vh - 86px)">
        <div style="padding: 10px 0">
          <div
              @click="loadFiles(item.category)"
              class="category"
              style="padding: 10px 0"
              v-for="item in categoryList"
              :key="item.text"
              :class="{ 'category-active' : category === item.category}"
          >
            <i v-if="item.icon" :class="item.icon" style="margin-right: 5px"></i>
            <span>{{ item.text }}</span>
          </div>
        </div>
      </div>

      <div style="flex: 1">
        <Main
            :type-list="typeList"
            :category="category"
            v-if="['all', 'img', 'video', 'zip'].includes(category)"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import Main from "@/components/Main.vue"


const route = useRoute()
const router = useRouter()

// 用户信息
const user = ref(JSON.parse(localStorage.getItem('user') || '{}'))

// 分类数据
const categoryList = [
  { text: '全部文件', category: 'all'},
  { text: '图片', category: 'img' },
  { text: '视频', category: 'video' },
  { text: '压缩', category: 'zip'},
]

// 类型数据
const typeList = ref([
  { text: 'mp3', icon: 'ep-icon-headset' },
  { text: 'mp4', icon: 'ep-icon-video' },
  { text: 'jpg', icon: 'ep-icon-picture' },
  { text: 'jpeg', icon: 'ep-icon-picture' },
  { text: 'png', icon: 'ep-icon-picture' },
  { text: 'pdf', icon: 'ep-icon-document' },
  { text: 'docx', icon: 'ep-icon-document' },
  { text: 'txt', icon: 'ep-icon-document' },
  { text: 'zip', icon: 'ep-icon-box' },
  { text: 'folder', icon: 'ep-icon-folder' },
])

// 当前分类
const category = ref(route.query.category || 'all')

// 监听路由参数变化 排错
watch(
    () => route.query.category,
    (newVal) => {
      console.log('检测到分类变化:', newVal)
      category.value = newVal || 'all'
    },
    { immediate: true }
)

// 加载文件方法
const loadFiles = (category) => {
  router.push({
    path: '/manager/diskHome',
    query: { category: category }
  })
}
</script>

<style scoped>

.category {
  cursor: pointer;
}
.category:hover {
  background-color: #f8f8f8;
  color: #000;
}
.category-active {
  color: #409EFF;
}
</style>